<template>
  <div class="middleDv">
    <div class="middleBottom">
      <div
        class="box floating-element"
        v-for="item in bottomList"
        :key="item.text"
        :class="checkId == item.id ? 'active' : ''"
        @click="handleCheck(item)"
      >
        <div class="title b">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MiddleDv",
  props: {},
  components: {},
  data() {
    return {
      checkId: 3,
      bottomList: [
        {
          id: 1,
          text: "站房监测",
        },
        {
          id: 2,
          text: "管网监测",
        },
        {
          id: 3,
          text: "窖井监测",
        },
        {
          id: 4,
          text: "工单维修",
        },
        {
          id: 5,
          text: "资产管理",
        },
        {
          id: 6,
          text: "巡检任务",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    handleCheck(data) {
      this.checkId = data.id;
      this.$emit("change", this.checkId);
    },
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.middleDv {
  width: 100%;
  height: calc(100% - 22px);
  position: relative;
  .middleBottom {
    position: absolute;
    bottom: 85px;
    left: 50px;
    right: 30px;
    display: flex;
    align-items: flex-end;
    .box {
      width: 240px;
      height: 219px;
      cursor: pointer;
      background-image: url("../assets/box.png");
      .b {
        padding-right: 22px;
      }
      .num {
        font-size: 46px;
        color: #01fffe;
        padding-top: 32px;
        span {
          font-size: 20px;
        }
      }
      .title {
        font-size: 22px;
        color: #ffffff;
        line-height: 29px;
        margin-top: 62px;
      }
      &.active {
        background-image: url("../assets/box3.png");
        .title {
          color: #fff;
          font-size: 26px;
          font-weight: 600;
        }
      }
    }
    & > div:nth-child(2),
    & > div:nth-child(5) {
      margin-bottom: 49px;
    }
    & > div:nth-child(1),
    & > div:nth-child(6) {
      margin-bottom: 120px;
    }
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.floating-element {
  display: inline-block;
  // animation: float 3s infinite;
}
</style>
